<template>
  <div class="loginBox">
    <span class="aaa" @click="screen">全屏全屏全屏全屏全屏</span>
    <div class="commonHead">
      <div class="imgBox">
        <img src="@/assets/img/diLogo.png" alt="">
        <img src="@/assets/img/TEClogo@2x.png" alt="">
        <img src="@/assets/img/muLogo.png" alt="">
      </div>
      <div class="linkBox">
        <div class="linkItem" @click="toPosition">
          <img src="@/assets/img/positionSet.png" alt="">
          <span>站位设置</span>
        </div>
        <div class="linkItem" @click="toNetWork">
          <img src="@/assets/img/netWork.png" alt="">
          <span>系统设置</span>
        </div>
      </div>
    </div>
    <div class="middleBox">
      <div class="loginForm">
        <h1>{{positionIndex == 0?'缝制模式':'挂片模式'}}</h1>
        <div class="fieldArea">
          <van-field label-width="5.2em" class="fieldItem" v-model="loginMsg.lineNumber" type="tel" placeholder="流水线号" label="流水线号" />
          <!-- 允许输入正整数，调起纯数字键盘 -->
          <van-field label-width="5.2em" class="fieldItem" v-model="loginMsg.stationNum" type="tel" :placeholder="positionIndex == 0?'缝制站位号':'挂片站位号'" :label="positionIndex == 0?'缝制站位号':'挂片站位号'" />
          <van-field label-width="5.2em" class="fieldItem" v-model="jobNumber" type="text" placeholder="工号" label="工号" />
        </div>
        <van-button class="loginbtn" type="primary" color="#007DBC" @click="login">登录</van-button>
      </div>
    </div>
    <div class="bottomMsg">
      <img src="@/assets/img/companyLogo.png" alt="" class="companyLogo" />
      <div class="deviceMsg">
        Copyright 2009-2022 秒优科技 版权所有
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { loginApi } from '@/api/loginApi'
export default {
  data(){
    return {
      fullscreen: false,
      loginMsg:{
        lineNumber:'',  // 流水线号
        stationNum:'',  // 站位号
      },
      positionIndex: '0',
      jobNumber:'',   // 工号
    }
  },
  mounted(){
    if(localStorage.getItem('positionIndex')){
      this.positionIndex = localStorage.getItem('positionIndex')
    }
      
    if(localStorage.getItem('loginMsg') && localStorage.getItem('positionIndex') == 0){
      this.loginMsg = JSON.parse(localStorage.getItem('loginMsg'))
    }
    if(localStorage.getItem('loginMsgPare') && localStorage.getItem('positionIndex') == 1){
      this.loginMsg = JSON.parse(localStorage.getItem('loginMsgPare'))
    }
    if(localStorage.getItem('jobNumber')){
        this.jobNumber = localStorage.getItem('jobNumber')
      }
  },
  methods:{
    screen(){
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    login(){
      if(!this.loginMsg.lineNumber) return Toast('请输入流水线号')
      if(!this.loginMsg.stationNum) return Toast('请输入站位号')
      if(!this.jobNumber) return Toast('请输入工号')
      loginApi({lineNumber:this.loginMsg.lineNumber,stationNum:this.loginMsg.stationNum,jobNumber:this.jobNumber}).then(res =>{
        localStorage.setItem('jobNumber',this.jobNumber)
        if(res.data.code == 0){
          sessionStorage.setItem('userData',JSON.stringify(res.data.result))
          // return
          let loginMsg = {
            lineNumber:this.loginMsg.lineNumber,
            stationNum:this.loginMsg.stationNum
          }
          if(this.positionIndex == 0){
            localStorage.setItem('loginMsg',JSON.stringify(loginMsg))
            // if(this.jobNumber == '371260' || this.jobNumber == '919904' || this.jobNumber == '582848' || this.jobNumber == '302520'){
            //   this.$router.push('/sewing/sewingHomeTwo')
            // }else{
              // if(res.data.result.lineType == '线外'){
              //   this.$router.push('/sewing/sewingHome')
              // }else{
              //   this.$router.push('/sewing/sewingHome')
              // }
              this.$router.push('/sewing/sewingHome')
            // }
          }else{
            localStorage.setItem('loginMsgPare',JSON.stringify(loginMsg))
            this.$router.push('/hanger/startTask')
          }
        }
      })
    },
    toPosition(){
      this.$router.push('/setting/position')
    },
    toNetWork(){
      this.$router.push('/setting/netWork')
    }
  }
}
</script>

<style lang="less" scoped>
.loginBox {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('../assets/img/diBgc.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .aaa {
    position: absolute;
    opacity: 0;
    top: 250px;
  }
  .commonHead{
    background: #fff;
    padding: 0 5px 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    height: 70px;
    align-items: center;
    .imgBox{
      img{
        height: 43px;
      }
      img:nth-child(2){
        margin: 0 8px 0 3px;
      }
    }
    .linkBox{
      display: flex;
      align-items: center;
      height: 100%;
      .linkItem{
        display: flex;
        align-items: center;
        // margin-right: 20px;
        height: 100%;
        width: 140px;
        // border: 1px solid #000;
        position: relative;
        z-index: 10;
        justify-content: center;
        img{
          width: 25px;
          margin-right: 5px;
        }
        &:first-child:before{
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: -1;
          // background: #58a;
          transform: skewX(15deg);
          border-right: 1px solid #eee;
          border-left: 1px solid #eee;
        }
      }
    }
  }
  .middleBox{
    .loginForm {
      padding: 28px 28px 28px 28px;
      background: #fff;
      border-radius: 8px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-sizing: border-box;
      h1 {
        font-size: 25px;
        color: #333;
        font-weight: normal;
        text-align: left;
        margin-bottom: 18px;
      }
      .fieldArea {
        margin: 5px 0 15px 0;
        .fieldItem{
          font-size: 18px;
          border: 1px solid #eee;
          margin-bottom: 16px;
          width: 280px;
          padding: 12px 15px!important;
        }
        /deep/ .van-cell {
          padding: 15px 25px;
          .van-field__label {
            label {
              color: #000;
            }
          }
        }
        /deep/ .van-cell:after {
          transform: scaleY(0) !important;
        }
      }
      .loginbtn {
        width: 100%;
        font-size: 25px;
        border-radius: 8px;
        height: 55px;
      }
    }
  }
  .bottomMsg {
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    padding: 0 30px 20px 20px;
    align-items: center;
    .companyLogo {
      width: 150px;
      height: 45px;
    }
    .deviceMsg {
      font-size: 20px;
      margin-left: 5px;
      div {
        display: flex;
        align-items: center;
        span:first-child {
          font-weight: 700;
          margin-right: 3px;
        }
      }
    }
  }
}
</style>
